<template>
  <div class="stackcontents-container">
    <ul>
      <li v-for="(item, i) in list" :key="i" @click.stop="handlerClick(item)">
        <span :class="{ active: item.isActive }">{{ item.name }}</span>
        <span v-if="item?.articleCount">
          {{ " (" + (item.articleCount || 0) + "篇)" }}
        </span>
        <StackContents :list="item.children" @click="handlerClick" />
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "StackContents",
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    handlerClick(item) {
      if (!item.isActive) {
        this.$emit("click", item);
      }
    },
  },
};
</script>

<style scoped lang="less">
@import "@/styles/var.less";
.stackcontents-container {
  width: 100%;
  height: 100%;
  padding: 8px;
  li {
    cursor: pointer;
    min-height: 40px;
  }
  .active {
    color: @warn;
    font-weight: 800;
  }
  .stackcontents-container {
    margin-left: 12px;
  }
}
</style>
